import React, { useState, useEffect } from 'react';
import { Row, Spin } from 'antd';
import { withRoutePage } from '@/utils/enhanceUtils';
import { getOverviewData, getADMOverviewData, getHROverviewData } from '@/services/organization';

// import TopCard from './compoments/TopCard';
import OperationCard from './compoments/OperationCard';
import Work from './Work';

import styles from './index.less';
// import requestData from './data.json';
// import requestHRData from './dataHR.json';
// import requestADMData from './dataADM.json';

const Overview = () => {
    const [overviewData, setOverviewData] = useState({});
    const [HRData, setHRData] = useState({});
    const [ADMData, setADMData] = useState({});

    // 1:星期 2:月
    const [reportType] = useState(1);
    const [spinning, setSpinning] = useState(false);

    const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};

    const fetchData = async () => {
        setSpinning(true);
        const overviewResult = await getOverviewData({
            type: reportType
        });
        if (overviewResult.code === 10000) {
            setOverviewData({ ...overviewResult.data });
        }
        const params = {
            companyId: user.companyId,
            reportType
        };
        const ADMResult = await getADMOverviewData(params);
        if (ADMResult.code === 10000) {
            setADMData({ ...ADMResult.data });
        }
        const HRResult = await getHROverviewData(params);
        if (HRResult.code === 10000) {
            setHRData({ ...HRResult.data });
        }
        setSpinning(false);
    };

    useEffect(() => {
        fetchData();
    }, [reportType]);

    // const getBtnType = type => (reportType === type ? 'primary' : 'link');

    return (
        <Row className={styles.container} style={{ overflowX: 'auto' }}>
            <Spin spinning={spinning}>
                <Row style={{ minWidth: 1200 }}>
                    {/* <Row className={styles.topBtn}>
                        <Button type={getBtnType(1)} onClick={() => setReportType(1)}>
                            本周
                        </Button>
                        <Button style={{ marginLeft: 24 }} type={getBtnType(2)} onClick={() => setReportType(2)}>
                            本月
                        </Button>
                    </Row>
                    <Row className={styles.block}>
                        <TopCard data={overviewData} ADMData={ADMData} query={{ reportType }} />
                    </Row> */}

                    <Work reportType={reportType} loading={spinning} data={overviewData} />

                    <Row className={styles.block}>
                        <OperationCard ADMData={ADMData} HRData={HRData} />
                    </Row>
                </Row>
            </Spin>
        </Row>
    );
};

export default withRoutePage(Overview);
